<template>
   <h3>阻止默认事件行为.prevent</h3>
   <a href="http://www.baidu.com">跳转</a>
   <br />
   <a href="http://www.baidu.com" @click.prevent>跳转</a>
   <h3>阻止事件冒泡.stop</h3>
   <div class="div1" @click="show('祖父元素')">祖父元素
     <div class="div2" @click="show('父亲元素')">父亲元素
	   <div class="div3" @click="show('子元素')">子元素</div>
	 </div>
   </div>
   <br />
   <div class="div1" @click="show('祖父元素')">祖父元素
     <div class="div2" @click.stop="show('父亲元素')">父亲元素
   	   <div class="div3" @click="show('子元素')">子元素</div>
   	 </div>
   </div>
   
   <h3>事件捕获.capture</h3>
   <div class="div1" @click.capture="show('祖父元素')">祖父元素
     <div class="div2" @click.capture="show('父亲元素')">父亲元素
   	   <div class="div3" @click.capture="show('子元素')">子元素</div>
   	 </div>
   </div>
   
   <h3>使事件只触发一次.once</h3>
   <button @click="show('只触发一次.once')">点击</button>
   <button @click.once="show('只触发一次.once')">点击</button>
   
   <h3>使DOM元素只有自身触发事件时才执行事件方法.self</h3>
   <div class="div1" @click.self="show('祖父元素')">祖父元素
     <div class="div2" @click.self="show('父亲元素')">父亲元素
   	   <div class="div3" @click.self="show('子元素')">子元素</div>
   	 </div>
   </div>
   
   <h3>监听滚动事件</h3>
   <h3>捕获特定按键.enter .esc .tab .ctrl</h3>
   <input type="text"  @keyup="show('123')"/>
   <input type="text" @keyup.enter="show('我松开了enter键')" />
   <h3>捕获鼠标按键 .left .right .middle</h3>
   <input type="text" @mouseover.right=""/>
</template>

<script setup>
	//定义事件处理器
	const show=(msg)=>{
		console.log(msg)
	}
	
	//事件冒泡方式的条件
	//1.拥有父子层级关系
	//2.拥有同一种事件
	//3.事件传递的方向：从内部到外部，从小到大
</script>

<style scoped>
	.div1{
		width: 250px;
		height: 250px;
		background-color: bisque;
	}
	.div2{
		width: 150px;
		height: 150px;
		background-color: cadetblue;
	}
	.div3{
		width: 50px;
		height: 50px;
		background-color: pink;
	}
</style>